<template>
  <div class="top">
    <TopHeader></TopHeader>
    <div class="top-banner" :style='"background-image:url("+topBanner+")"'>
      <div class="top-line"></div>
      <div class="top-wrap center-wrap">
       <div class="top-log">
         <img src="../../assets/img/top_log.png" alt="">
       </div>
       <div class="top-title">{{topTitle}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import TopHeader from '../TopHeader/TopHeader.vue'
  export default {
    name:'Top',
    components:{
      TopHeader
    },
    data(){
      return{
        topBanner:require('../../assets/img/top_bg.png'),
        topTitle:'把你的好奇心送上太空',
        isShow:false
      }
    },
    methods:{
      
    }
  }
</script>

<style scoped >
  .top{
    position: relative;
    z-index: 999;
  }
  .top-banner{
    position: relative;
    width: 100%;
    height: 9.375vh;
    min-height: 155px;
    background-position: center 0;
    background-size: cover;
    margin: 0 auto;
    z-index: 0;
    cursor: pointer;
  }
  .top-line{
    /* 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。 */
    pointer-events: none;
    width:100%;
    height:100px;
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
    background: linear-gradient(rgba(0,0,0,.4),transparent);
  }
  .top-wrap{
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .top-log{
    position: absolute;
    /* width: 220px; */
    height: 50%;
    min-height: 60px;
    bottom:10px;
    left:0;
    cursor: pointer;
  }
  .top-log>img{
    height: 100%;
  }
  .top-title{
    font-size: 14px;
    position: absolute;
    bottom: 25px;
    left: 280px;
    color: #fff;
    padding:6px 10px;
    background-color: rgba(0,0,0,.68);
    line-height: 20px;
    max-width: 350px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all .3s;
  }
  .top-banner:hover .top-title{
    opacity: 1;
  }
</style>
